<template>
  <div class="app-container" v-loading="loading">
    <div>
      <leaseContract state="detail" v-model="form.replacementCar" />
      <carReplacementService state="detail" v-model="form.replacementCar" />
      <vehicleInformationZD state="detail" v-model="form.replacementCar" />
      <StorageOutInventoryInfoTche state="detail" v-model="form.carOutStorage" />
      <informationForCars state="write" v-model="form.carInStorage" ref="informationForCars" />
    </div>
    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="submitForm">提交审批</el-button>
    </div>
  </div>
</template>

<script>
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import StorageOutInventoryInfoTche from '@/views/carInventory/components/StorageOutInventoryInfoTche.vue'
import informationForCars from '@/views/carInventory/components/informationForCars.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
import * as inInventoryApi from '@/api/carInventory/inInventory'
export default {
  components: { leaseContract, carReplacementService, vehicleInformationZD, StorageOutInventoryInfoTche, informationForCars },
  name: 'InInventoryTche',
  props: {},
  data() {
    return {
      loading: false,
      form: { replacementCar: {}, carOutStorage: {}, carInStorage: {} },
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取入库单详情
    getDetail() {
      this.loading = true
      inInventoryApi.replacementCar(this.$route.query.orderId).then((res) => {
        if (res.code == 200) {
          this.loading = false
          this.form = {
            ...res.data,
            replacementCar: {
              ...res?.data?.replacementCar,
            },
            carOutStorage: {
              ...res?.data?.carOutStorage,
            },
            carInStorage: {
              ...res?.data?.carInStorage,
              returnCarDate: res?.data?.carInStorage.returnCarDate || undefined,
              inboundMileage: res?.data?.carInStorage.inboundMileage || undefined,
              inboundMileageOss: res?.data?.carInStorage.inboundMileageOss || undefined,
              inboundOilQuantity: res?.data?.carInStorage.inboundOilQuantity || undefined,
              inboundOilQuantityOss: res?.data?.carInStorage.inboundOilQuantityOss || undefined,
              carPhotoOss: res?.data?.carInStorage.carPhotoOss || undefined,
            },
          }
        }
      })
    },
    savaObj(type) {
      const loading = this.$loading({
        lock: true,
        text: type == 1 ? '保存中' : '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let data = {
        ...this.form,
        carInStorage: {
          ...this.form.carInStorage,
          saveFlag: type,
        },
      }
      inInventoryApi
        .submitTc(data)
        .then((res) => {
          if (res.code == 200) {
            loading.close()
            this.cancel()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    //提交
    async submitForm() {
      let result = await this.valid()
      if (result) {
        this.savaObj(2)
      } else {
        this.error()
      }
    },
    //保存
    save() {
      this.savaObj(1)
    },
    cancel() {
      this._toPage({
        name: 'InInventoryList',
      })
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll('.el-form-item__error')[0]
        el.scrollIntoView({ block: 'center', behavior: 'smooth' })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
